<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :title="'添加客服展示'"
    :visible="visible"
    class="ele-dialog-view"
    custom-class="ele-dialog-form"
    top="10vh"
    width="757px"
    @closed="closed"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="推广平台:" prop="platform">
        <el-select
          v-model="form.platform"
          class="ele-block"
          clearable
          multiple
          placeholder="请选择推广平台"
          @change="platformChange"
        >
          <el-option
            v-for="item in platformList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="推广市场:" prop="bazaarId">
        <el-select
          v-model="form.bazaarId"
          class="ele-block"
          clearable
          multiple
          placeholder="请选择推广市场"
          @change="bazaarIdChange"
        >
          <el-option
            v-for="item in bazaarList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="落地页:" prop="pageId" style="margin-bottom: 15px">
        <el-select
          v-model="form.pageId"
          class="ele-block"
          clearable
          collapse-tags
          multiple
          placeholder="请选择展示落地页"
        >
          <el-option
            v-for="item in pageList"
            :key="item.id"
            :label="item.SiteName + ` - [` + item.DomainUrl + `]`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="form.pageId"
        label="展示模式:"
        style="margin-bottom: 10px"
      >
        <el-radio-group v-model="form.model" @change="modelChange">
          <el-radio :label="0">按分组展示</el-radio>
          <el-radio :label="1">按微信号展示</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="!form.model"
        label="微信分组:"
        style="margin-bottom: 15px"
      >
        <el-select
          v-model="form.zoneid"
          class="ele-block"
          clearable
          multiple
          placeholder="请选择展示微信分组"
          @change="zoneidChange"
        >
          <el-option
            v-for="item in zoneList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="!form.model"
        label="微信列表:"
        style="margin-bottom: 6px"
      >
        <el-transfer
          v-model="form.wechat"
          :data="serviceList"
          :props="{ key: 'id', label: 'label' }"
          :titles="['可选微信', '已选微信']"
          filterable
        ></el-transfer>
      </el-form-item>

      <el-form-item
        v-if="form.model"
        label="微信列表:"
        style="margin-bottom: 0"
      >
        <el-checkbox
          v-model="checkWechatAll"
          :indeterminate="checkWechatBoolean"
          @change="changeWechatAllData"
          >全选/反选
        </el-checkbox>
        <div style="float: right">
          <el-form-item label="微信号:">
            <el-input
              v-model="form.wechatInput"
              clearable
              placeholder="请输入搜索标题."
              size="small"
              style="width: 200px"
              @clear="wechatClear"
            ></el-input>
            <span style="margin-left: 10px"></span>
            <el-button
              icon="el-icon-search"
              size="small"
              type="primary"
              @click="wechatSearch"
              >搜索</el-button
            >
          </el-form-item>
        </div>
        <div style="margin: 10px 0"></div>
        <div
          style="
            border-radius: 3px;
            border: 1px solid var(--border-color-base);
            padding: 10px;
            height: 310px;
            overflow-y: auto;
            margin-bottom: 6px;
          "
        >
          <el-checkbox-group
            v-model="form.wechatData"
            @change="changeWechatData"
          >
            <el-checkbox
              v-for="obj in serviceTemp"
              v-show="obj.display"
              :key="obj.id"
              :label="obj.id"
              style="width: 260px"
              >[{{ obj.name }}] {{ obj.nickname }} {{ obj.wechat }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button :loading="loading" type="primary" @click="save"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ServicePlanEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 市场列表
    bazaar: Array,
    // 站点列表
    page: Array,
    // 分组列表
    zone: Array,
    // 微信列表
    service: Array,
  },
  data() {
    return {
      // 微信全选
      checkWechatAll: false,

      // 全选是否全部勾选
      checkWechatBoolean: false,

      // 表单数据
      form: Object.assign(
        {},
        {
          platform: [],
          bazaarId: [],
          pageId: [],
          model: 0,
          zoneid: [],
          wechat: [],
          wechatInput: "",
          wechatData: [],
        }
      ),

      // 展示平台
      platformList: [
        { value: 1, label: "百度SEM竞价" },
        { value: 2, label: "百度信息流" },
        { value: 3, label: "巨量引擎" },
        { value: 4, label: "搜狗推广" },
        { value: 5, label: "卧龙推广" },
        { value: 6, label: "360点睛" },
      ],

      // 表单验证规则
      rules: {
        platform: [
          { required: true, message: "请选择推广平台", trigger: "blur" },
        ],
        bazaarId: [
          { required: true, message: "请选择推广市场", trigger: "blur" },
        ],
        pageId: [
          { required: true, message: "请选择推广落地页", trigger: "blur" },
        ],
      },
      // 提交状态
      loading: false,
      // 市场列表
      bazaarList: [],
      // 市场列表
      bazaarTemp: [],
      // 站点列表
      pageList: [],
      // 站点列表
      pageTemp: [],
      // 分组列表
      zoneList: [],
      // 分组列表
      zoneTemp: [],
      // 微信列表
      serviceList: [],
      // 微信列表
      serviceTemp: [],
    };
  },
  watch: {
    bazaar() {
      this.bazaarTemp = this.bazaar;
    },
    page() {
      this.pageTemp = this.page;
    },
    zone() {
      this.zoneTemp = this.zone;
    },
    service() {
      this.serviceTemp = this.service;
      for (let i in this.serviceTemp) {
        this.serviceTemp[i].display = true;
      }
    },
  },
  methods: {
    closed() {
      this.pageList = [];
      this.zoneList = [];
      this.bazaarList = [];
      this.serviceList = [];
      this.checkWechatAll = false;
      this.checkWechatBoolean = false;
      for (let i in this.form) {
        this.form[i] = null;
      }
      this.wechatClear();
      this.form = Object.assign(
        {},
        {
          platform: [],
          bazaarId: [],
          pageId: [],
          model: 0,
          zoneid: [],
          wechat: [],
          wechatInput: "",
          wechatData: [],
        }
      );
    },

    wechatClear() {
      for (let i in this.serviceTemp) {
        this.serviceTemp[i].display = true;
      }
    },

    wechatSearch() {
      const wechatInput = this.form.wechatInput + "";
      if (!wechatInput) {
        this.wechatClear();
        return;
      }
      for (let i in this.serviceTemp) {
        let name = this.serviceTemp[i].name + "";
        let wechat = this.serviceTemp[i].wechat + "";
        let nickname = this.serviceTemp[i].nickname + "";
        this.serviceTemp[i].display =
          name.indexOf(wechatInput) > -1 ||
          wechat.indexOf(wechatInput) > -1 ||
          nickname.indexOf(wechatInput) > -1;
      }
    },

    changeWechatAllData(obj) {
      let ids = this.serviceTemp.map(function (arr) {
        return arr.id;
      });
      this.checkWechatBoolean = false;
      this.form.wechatData = obj ? ids : [];
    },

    changeWechatData(obj) {
      this.checkWechatAll = obj.length === this.serviceTemp.length;
      this.checkWechatBoolean =
        obj.length > 0 && obj.length < this.serviceTemp.length;
    },

    platformChange(obj) {
      this.bazaarList = [];
      this.form = Object.assign({}, this.form, {
        bazaarId: [],
        pageId: [],
        zoneid: [],
        wechat: [],
      });
      for (let i = 0; i < this.bazaarTemp.length; i++) {
        if (obj.indexOf(this.bazaarTemp[i].platform) > -1) {
          this.bazaarList.push(this.bazaarTemp[i]);
        }
      }
    },

    bazaarIdChange(obj) {
      this.pageList = [];
      this.form = Object.assign({}, this.form, {
        pageId: [],
        zoneid: [],
        wechat: [],
      });
      for (let i = 0; i < this.pageTemp.length; i++) {
        if (obj.indexOf(this.pageTemp[i].bazaar) > -1) {
          this.pageList.push(this.pageTemp[i]);
        }
      }
      this.zoneList = [];
      for (let i = 0; i < this.zoneTemp.length; i++) {
        if (obj.indexOf(this.zoneTemp[i].bazaarId) > -1) {
          this.zoneList.push(this.zoneTemp[i]);
        }
      }
    },

    zoneidChange(obj) {
      this.serviceList = [];
      for (let i = 0; i < this.serviceTemp.length; i++) {
        if (obj.indexOf(this.serviceTemp[i].zoneid) > -1) {
          this.serviceTemp[i]["label"] =
            "[" +
            this.serviceTemp[i].name +
            "] " +
            this.serviceTemp[i].nickname +
            " " +
            this.serviceTemp[i].wechat;
          this.serviceList.push(this.serviceTemp[i]);
        }
      }
    },

    modelChange(obj) {
      if (obj === 0) {
        this.checkWechatAll = false;
        this.checkWechatBoolean = false;
        this.form = Object.assign({}, this.form, {
          wechat: [],
        });
        return;
      }
      this.form = Object.assign({}, this.form, {
        wechatInput: "",
        wechatData: [],
      });
    },

    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.model) {
            this.form.wechat = [];
          } else {
            this.form.wechatData = [];
          }
          this.form.wechatInput = "";
          this.$http
            .post("/ServicePlan/create", this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.closed();
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>
<style scoped>
.ele-dialog-view /deep/ .el-transfer__buttons {
  padding: 0 8px;
}

.ele-dialog-view /deep/ .el-transfer__button {
  padding: 26px 2px;
}

.ele-dialog-view /deep/ .el-transfer-panel {
  width: 280px !important;
}

.ele-dialog-view /deep/ .el-transfer-panel__body {
  height: 266px !important;
}

.ele-dialog-view /deep/ .el-transfer-panel__list.is-filterable {
  height: 216px !important;
}

.ele-dialog-view
  /deep/
  .el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label {
  font-size: 12px !important;
}

.ele-dialog-view /deep/ .el-transfer-panel__list .el-checkbox__label {
  font-size: 12px !important;
}

.ele-dialog-view /deep/ .el-transfer-panel__filter .el-input__inner {
  border-radius: 5px;
}

.ele-dialog-view /deep/ .el-transfer-panel__filter {
  margin: 8px !important;
}

.ele-dialog-view /deep/ .el-form-item__content .el-checkbox__label {
  font-size: 12px !important;
}

.ele-dialog-view /deep/ .el-checkbox {
  margin-right: 2px !important;
}
</style>
